import SEO from '../components/SEO'

<SEO
  title="Stack"
  description="Stack is a layout utility component that makes it easy to stack elements together and apply a space between them."
/>

# Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the [Flex](/flex) component.

<carbon-ad />

## Import

```js
import { CStack } from '@chakra-ui/vue'
```

By default, each item is stacked vertically. Stack clones its children and passes the spacing to them using `margin-bottom` or `margin-right`.

## Usage

```vue live=true
<c-stack :spacing="5">
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>See the Vue</c-heading>
    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
  </c-box>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>Go Nuxt!</c-heading>
    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
  </c-box>
</c-stack>
```

## Stack items horizontally

To stack `CStack` children horizontally, pass the `isInline` prop or `direction` and set it to row.

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

```vue live=true
<c-stack :spacing="5" is-inline>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>See the Vue</c-heading>
    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
  </c-box>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>Go Nuxt!</c-heading>
    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
  </c-box>
</c-stack>
```

## Reverse display order of items

Pass the `isReversed` prop or set `direction` to `row-reverse` or `column-reverse`.

```vue live=true
<c-stack :spacing="5" is-reversed>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>See the Vue</c-heading>
    <c-text :mt="4">Vue makes front-end development a breeze.</c-text>
  </c-box>
  <c-box :p="5" shadow="md" border-width="1px">
    <c-heading>Go Nuxt!</c-heading>
    <c-text :mt="4">Nuxt makes writing Vue even easier.</c-text>
  </c-box>
</c-stack>
```

## Stacking HTML elements
The `CStack` element is able also to stack HTML elements. Internally it wraps HTML elements inside a `CBox` primitive
component and spaces it like it would any other Chakra component.

```vue live=true
<c-stack :spacing="4">
  <c-text>Chakra component 1</c-text>
  <p>HTML paragraph element</p>
  <h3>HTML heading element</h3>
  <c-text>Chakra component 2</c-text>
</c-stack>
```

## Props

| Name                 | Type                          | Default | Description                                                                                                              |
| -------------------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------ |
| `isInline`           | `boolean`                     | false   | If `true` the items will be stacked horizontally.                                                                        |
| `isReversed`         | `boolean`                     | false   | If `true` the items will be displayed in reverse order.                                                                  |
| `direction`          | `FlexProps["flexDirection"]`  |         | The direction to stack the items.                                                                                        |
| `spacing`            | `StyledSystem.MarginProps`    |         | The space between each stack item                                                                                        |
| `align`              | `FlexProps["alignItems"]`     |         | The alignment of the stack item. Similar to `align-items`                                                                |
| `justify`            | `FlexProps["justifyContent"]` |         | The distribution of the stack item. Similar to `justify-content`                                                         |
| `shouldWrapChildren` | `boolean`                     |         | If `true`, the children will be wrapped in a `Box` with `display: inline-block`, and the Box will take the spacing props |

## Slots

| Name    | Description              |
| ------- | ------------------------ |
| default | The content of the stack |
